<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>动态组件</title>
        <style>
            .wrapper { border: 1px solid blue ;}
            .wrapper>a { 
                display: inline-block ; 
                margin: 10px ;
                border: 1px solid #dedede ;
                padding: 5px ;
                cursor: pointer ;
                user-select: none ;
            }

            .wrapper>p ,
            .wrapper .email ,
            .wrapper .tel {
                margin: 10px ;
            }

            .wrapper .email>* ,
            .wrapper .tel>* {
                margin-right: 5px ;
            }
        </style>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <div id="dynamic">
            <div class="wrapper">
                <!-- 务必注意这里的 'email' 表示字符串字面量而不能是一个变量 -->
                <a @click="currentName = 'email'">用邮箱登录</a>
                <!-- 如果 tel 或 email 是变量而不是字面量，则表示 Data Property -->
                <a @click="currentName = 'tel'">用手机号登录</a>

                <p>动态组件</p>
                <!-- 使用 component 的 is 属性来确定需要显示的组件 -->
                <component v-bind:is="currentName"></component>
                
                <p>动态组件(keep-alive)</p>
                <!-- 务必注意在 keep-alive 中只能写 component 不能写其它内容(比如注释)-->
                <keep-alive>
                    <component v-bind:is="currentName"></component>
                </keep-alive>
            </div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        currentName: 'tel'
                    }
                },
                watch: {
                    currentName( value , old ){
                        console.log( old , value );
                    }
                }
            });

            app.component( 'email' , {
                template: `<div class="email">
                                <label for="email">用邮箱登录</label>
                                <input type="text" id="email">
                                <button>登录</button>
                           </div>`
            });

            app.component( 'tel' , {
                template: `<div class="tel">
                                <label for="tel">用手机号登录</label>
                                <input type="text" id="tel">
                                <button>登录</button>
                           </div>`
            });

            app.mount( '#dynamic' );
        </script>
        
    </body>
</html>